<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>v-text内置指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
   </head>

<body>
    <!-- 
        学习过的指令：
            v-bind    :     单向绑定解析表达式，可简写为 :xxx
            v-model   :     双向数据绑定
            v-for     :     遍历数组/对象/字符串
            v-on      :     绑定事件监听，可简写为@
            v-if      :     条件渲染(动态的控制节点是否存在)
            v-else    :     条件渲染(动态的控制节点是否存在)
            v-show    :     条件渲染(动态控制节点是否展示)

        v-text指令：
            1、作用：向其所在的节点中渲染文本数据
            2、与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}不会

     -->
    <!--准备好一个容器-->
    <div id="root">
<div>{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。

    new Vue({
        el:'#root',
        data:{
            name:'南风',
            str:'<h3>你好啊~<h3/>'
        }
    })

</script>
</html>
